<template>
	<view>
		<view class="user u-f-ac">
			<view class="u-margin-left-30" @click="goLogon">
				<u-avatar :src="userData.src" size="large" :show-level ="true"></u-avatar>
			</view>
			<view class="u-font-32 u-margin-left-30"  @click="goLogon">{{userData.name}}</view>
		</view>
		<view class="content">
			<view class="top-con">
				<view class="item">
					<view class="u-font-60 u-font-b">{{userData.withdrawable}}</view>
					<view class="u-font-26 u-light-color">可提现金额（元）</view>
				</view>
				
				<view class="item u-f-jsb">
					<view>
						<view class="u-font-40 u-font-b">{{userData.coming}}</view>
						<view class="u-font-26 u-light-color">今日货款</view>
					</view>
					<view>
						<view class="u-font-40 u-font-b">{{userData.came}}</view>
						<view class="u-font-26 u-light-color">今日订单数</view>
					</view>
				</view>
				<view class="item u-f-jsb" hover-class="u-cell-hover" @click="getBill">
					<view class="u-f-ac">
						<u-icon name="rmb-circle" color="#666666" size="38"></u-icon>
						<text class="u-font-26 u-padding-left-10">钱包管理</text>
					</view>
					<u-icon name="arrow-right" color="#666666" size="26"></u-icon>
				</view>
			</view>
			<view class="sub u-f-jsb u-margin-30">
				<view class="u-f-ajc" hover-class="u-cell-hover" @click="getorder">
					<image class="icon" src="../../static/images/order@x2.png" mode="widthFix"></image>
					<text class="u-font-32 u-padding-top-24">订单管理</text>
				</view>
				<view class="u-f-ajc" hover-class="u-cell-hover" @click="getAs">
					<image class="icon" src="../../static/images/After_sales@x2.png" mode="widthFix"></image>
					<text class="u-font-32 u-padding-top-24">售后管理</text>
				</view>
			</view>
			<view class="sub u-margin-30">
				<view class="u-f-ajc" style="width: 100%;" hover-class="u-cell-hover" @click="getgoods">
					<image class="icon" src="../../static/images/goods@x2.png" mode="widthFix"></image>
					<text class="u-font-32 u-padding-top-24">商品管理</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: {}
			}
		},
		onLoad(){
			this.$api.loading(true);
			this.loadData();
			setTimeout(() => {
				this.$api.loading(false);
			}, 500);
			//1.刚进入页面的时候就加载这个动画
			uni.startPullDownRefresh();
		},
		// 2.下拉刷新
		onPullDownRefresh() {
			this.loadData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
				// 这里放刷新数据的方法
			}, 1000);
		},
		methods: {
			async loadData() {
				this.userData = await this.$api.json('userData');
			},
			getBill(){
				uni.navigateTo({
					url: '../modular/bill/bill',
				})
			},
			getorder(){
				uni.navigateTo({
					url: '../modular/order/order',
				})
			},
			getAs(){
				uni.navigateTo({
					url: '../modular/After-sales/After-sales',
				})
			},
			getgoods(){
				uni.navigateTo({
					url: '../modular/goods/goods',
				})
			},
			goLogon(){
				uni.navigateTo({
					url: '../logon/logon'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user{
		overflow: hidden;
		padding-top: 40rpx;
		background-color: #191D19;
		padding-bottom: 160rpx;
		.u-font-32{
			color: $uni-text-color-inverse;
		}
	}
	.content{
		position: relative;
		z-index: 2;
		top: -100rpx;
		.top-con{
			background-color: $uni-bg-color;
			border-radius: 20rpx;
			margin: 0 30rpx;
			.item:not(:first-child){
				border-top: 1px solid #EEEEEE;
			}
			.item{
				padding: 30rpx;
			}
			.item:nth-child(2){
				padding: 0;
				&>view{
					padding: 30rpx;
					flex: 1;
				}
				&>view:not(:first-child){
					border-left: 1px solid #EEEEEE;
				}
			}
			.u-font-60{
				font-size: 60rpx;
			}
		}
		.sub{
			.u-f-ajc{
				flex-direction: column;
				width: 48%;
				height: 241rpx;
				background-color: $uni-bg-color;
				border-radius: 20rpx;
			}
			.icon{
				display: block;
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
</style>
